import { useSetState } from "ahooks";
import { Input, List, Radio } from "antd";

import styled from "styled-components";

const { Search } = Input;

const TestTopicEl = styled.div`
  width: 100%;
`;

const TestTopicBox = styled.div`
  padding-top: 10px;
`;

const TestTopic = () => {
  const [state, setState] = useSetState<any>({
    topicType: 0,
    message: [
      { name: "zds", msg: "ghghgh", time: "2023-11-13 12:20", id: "kwlwebriwer" },
      { name: "zds", msg: "ghghgh 123", time: "2023-11-13 12:50", id: "kwlwebriwer" }
    ]
  });

  const topicView = () => {
    switch (state.topicType) {
      case 0:
        return (
          <List
            size="small"
            header={<div>zds/msg/test</div>}
            bordered
            dataSource={state.message}
            renderItem={(item: any) => {
              return <List.Item>{JSON.stringify(item)}</List.Item>;
            }}
          />
        );
      case 1:
        return <Search placeholder="input msg text" enterButton="Send" loading={false} />;
      case 2:
        return (
          <div>
            <List
              size="small"
              header={<div>zds/msg/test</div>}
              bordered
              dataSource={state.message}
              renderItem={(item: any) => {
                return <List.Item>{JSON.stringify(item)}</List.Item>;
              }}
            />
            <Search
              placeholder="input msg text"
              enterButton="Send"
              style={{ marginTop: "10px" }}
              loading={false}
            />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <TestTopicEl>
      {/* 0-监听 1-发送 2-监听和发送 */}
      <Radio.Group
        onChange={(v) => {
          setState({
            topicType: v.target.value
          });
        }}
        value={state.topicType}
      >
        <Radio value={0}>Monitor</Radio>
        <Radio value={1}>Send</Radio>
        <Radio value={2}>Monitor and Send</Radio>
      </Radio.Group>

      <TestTopicBox>{topicView()}</TestTopicBox>
    </TestTopicEl>
  );
};

export default TestTopic;
